import React from 'react'
import { Button, Checkbox, Form, Input, message } from 'antd';
import { Link, useNavigate, } from "react-router-dom"
import '../assets/Login.less'

import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { login } from '../apis/user';
export default function Login() {
  const navigate = useNavigate()
  //登录
  const onFinish = async (values) => {
    const username = values.username
    const password = values.password
    const user = `username=${username}&password=${password}`
    const res = await login(user)
    // console.log(res)
    if (res.status == 200) {
      const token = res.data.data.token
      const userInfo = res.data.data.user

      localStorage.setItem('token', token)
      localStorage.setItem('userInfo', JSON.stringify(userInfo))
      navigate('/home/', { replace: true })
    } else {
      message.error('登录失败')
    }
  };
  const onFinishFailed = (errorInfo) => {
    // console.log('Failed:', errorInfo);
  };
  return (
    <div className='main'>
      <div className='content'>
        <div className='top'>
          <div style={{ verticalAlign: 'midd' }}>
            <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
          </div>
          <div><span> 赤兔养车</span></div>
        </div>
        <Form
          style={{
            width: '300px'
          }}
          size='large'
          name="basic"
          labelCol={{
            span: 0,
          }}
          wrapperCol={{
            span: 24,
          }}
          initialValues={{
            remember: true,
          }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item
            name="username"
            rules={[
              {
                required: true,
                message: 'Please input your Username!',
              },
            ]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
          </Form.Item>

          <Form.Item
            name="password"
            rules={[
              {
                required: true,
                message: 'Please input your password!',
              },
            ]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
            <Link to='/SettleIn'>商家入驻</Link>
          </Form.Item>
        </Form>
      </div>
    </div>

  )
}
